<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改人员')" />
	<th:block th:include="include :: cropbox-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-person-edit" th:object="${person}">
<!--            <input id="personId" name="personId" th:field="*{personId}"  type="hidden">-->
			<div class="form-group">
				<label class="col-sm-2 control-label">人员ID：</label>
				<div class="col-sm-4">
					<input id="personId" name="personId" th:field="*{personId}" class="form-control" type="text" readonly="true">
				</div>
				<label class="col-sm-2 control-label">姓名：</label>
				<div class="col-sm-4">
					<input id="personName" name="personName" th:field="*{personName}" class="form-control" type="text" readonly="true">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">性别：</label>
				<div class="col-sm-4">
					<div class="input-group" style="width: 100%">
						<select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}" readonly="true">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{sex}"></option>
						</select>
					</div>
<!--					<input id="sex" name="sex" th:field="*{sex}" class="form-control" type="text">-->
				</div>
				<label class="col-sm-2 control-label">所属组织：</label>
				<div class="col-sm-4">
					<input id="deptId" name="deptId" th:field="*{deptId}" class="form-control" type="text" readonly="true">
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">证件类型：</label>
				<div class="col-sm-4">
					<div class="input-group" style="width: 100%">
						<select name="certificateType" class="form-control m-b" th:with="type=${@dict.getType('sys_certificate_type')}" readonly="true">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{certificateType}"></option>
						</select>
					</div>
					<!--					<input id="certificateType" name="certificateType" th:field="*{certificateType}" class="form-control" type="text">-->
				</div>
				<label class="col-sm-2 control-label">证件号码：</label>
				<div class="col-sm-4">
					<input id="certificateNumber" name="certificateNumber" th:field="*{certificateNumber}" class="form-control" type="text" readonly="true">
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">家庭地址：</label>
				<div class="col-sm-9">
					<input id="address" name="address" th:field="*{address}" class="form-control" type="text" readonly="true">
				</div>
			</div>
			<div class="form-group">	

				<label class="col-sm-2 control-label">紧急联系人：</label>
				<div class="col-sm-4">
					<input id="linkmanName" name="linkmanName" th:field="*{linkmanName}" class="form-control" type="text" readonly="true">
				</div>
				<label class="col-sm-2 control-label">联系人电话：</label>
				<div class="col-sm-4">
					<input id="linkmanTel" name="linkmanTel" th:field="*{linkmanTel}" class="form-control" type="text" readonly="true">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">本人电话：</label>
				<div class="col-sm-4">
					<input id="tel" name="tel" th:field="*{tel}" class="form-control" type="text" readonly="true">
				</div>
				<label class="col-sm-2 control-label">备注：</label>
				<div class="col-sm-4">
					<input id="remark" name="remark" th:field="*{remark}" class="form-control" type="text" readonly="true">
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">标签ID：</label>
				<div class="col-sm-4">
					<input id="tagId" name="tagId" th:field="*{tagId}" class="form-control" type="text" readonly="true" style="background: blanchedalmond">
				</div>
			</div>
<!--			<div class="form-group">	-->
<!--				<label class="col-sm-2 control-label">头像路径：</label>-->
<!--				<div class="col-sm-4">-->
					<input id="avatar" name="avatar" th:field="*{avatar}" class="form-control" type="hidden">
<!--				</div>-->
<!--			</div>-->
		</form>
    </div>
	<div class="container">
		<div class="imageBox1">
			<div class="thumbBox"></div>
			<div class="spinner" style="display: none">Loading...</div>
		</div>
		<div class="action">
			<div class="new-contentarea tc">
				<a href="javascript:void(0)" class="upload-img"> <label for="avatar1">上传图像</label> </a>
				<input type="file" class="" name="avatar1" id="avatar1" accept="image/*" readonly="true"/>
			</div>
			<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" readonly="true"/>
			<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" readonly="true"/>
			<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-"  readonly="true"/>
			<!--			<input id="imgPath" name="avatar" class="form-control" type="text" style="display: none">-->
		</div>
		<div class="cropped1"></div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: cropbox-js" />
    <script type="text/javascript">
		$(window).load(function () {
			// alert("1");
			var avatar = '[[${person.avatar}]]';
			var options = {
				thumbBox: '.thumbBox',
				spinner: '.spinner',
				imgSrc: $.common.isEmpty(avatar) ? ctx + 'img/avatar.jpg' : ctx + 'profile/avatar/' + avatar
			};
			cropper = $('.imageBox1').cropbox(options);
			$('#avatar1').on('change', function() {
				var reader = new FileReader();
				reader.onload = function(e) {
					options.imgSrc = e.target.result;
					//根据MIME判断上传的文件是不是图片类型
					if((options.imgSrc).indexOf("image/")==-1){
						$.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
					} else {
						cropper = $('.imageBox1').cropbox(options);
					}
				}
				reader.readAsDataURL(this.files[0]);
			});

			$('#btnCrop').on('click', function(){
				var img = cropper.getDataURL();
				$('.cropped1').html('');
				$('.cropped1').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
				$('.cropped1').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
				// $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
			});

			$('#btnZoomIn').on('click', function(){
				cropper.zoomIn();
			});

			$('#btnZoomOut').on('click', function(){
				cropper.zoomOut();
			});
		});
		var prefix = ctx + "system/person";
		$("#form-person-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});
		
		// function submitHandler() {
	    //     if ($.validate.form()) {
	    //         $.operate.save(prefix + "/edit", $('#form-person-edit').serialize());
	    //     }
	    // }
		function submitHandler() {
			var img = cropper.getBlob();
			var formdata = new FormData();
			formdata.append("avatarfile", img);
			$.ajax({
				url: ctx + "system/person/updateAvatar",
				data: formdata,
				type: "post",
				processData: false,
				contentType: false,
				success: function(result) {
					var code = result.code;
					var msg = result.msg;
					if (code!=0){
						$.modal.alertError(msg);
					}else {
						$('#avatar').val(msg);
						if ($.validate.form()) {
							$.operate.save(prefix + "/edit", $('#form-person-edit').serialize());
						}
						// return msg;
					}
				},
				error : function(request) {
					$.modal.alertError("系统错误");
				},
			})
		}
	</script>
</body>
</html>
